<template>
  <div class="about">
    <form action="/">
      <van-search v-model="value" show-action placeholder="请输入搜索关键词" />
    </form>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="600"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="(item, index) in showList"
          :key="index"
          :desc="item.supportService"
          :title="item.name"
          :thumb="item.images[0]"
        >
          <template #tags>
            <p>{{ item.phone }}</p>
            <p>{{ item.address }}</p>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoading: false,
      loading: false, 
      finished: false,
      value: "",
      allList: [], // 所有的数据
      showList: [], // 展示的数据
      pageIndex: 0, // 当前页
      pageSize: 10, // 每一页要展示的条数
      id: 0,
    };
  },
  created() {
    this.id = this.$route.params.id; // 获取路由传入的id
  },
  methods: {
    info() {
      this.$axios
      .get(`https://locally.uieee.com/categories/${this.id}/shops`)
      .then((res) => {
        // console.log(res);
        this.allList = res.data;
        let num = this.pageIndex * this.pageSize;
        this.showList = this.allList.splice(0, num);
        this.isLoading = false;
        this.loading = false;
      });
    },
    onRefresh() { // 下拉刷新
      this.pageIndex = 0;
      this.showList = [];
      // console.log('fghjk');
      this.onLoad();
    },
    onLoad(){ // 上拉加载更多
      this.pageIndex++;
      if (this.pageIndex == 8){
        this.finished = true;
        return;
      }
      this.info();
    },
  },
};
</script>
